<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>我的购物车</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        .trim{
            width: 1300px;
            margin-left: 350px;
            height: 3px;
            background-color: #E66F23;
        }
        .detail{
            width: 1300px;
            margin-top: 10px;
            margin-left: 350px;
            height: 25px;
            text-align: left;
            font-size: 13px;
            line-height: 25px;
        }
        .mycart{
            width: 1300px;
            height: 80px;
            /* border: 1px solid black; */
            margin-left: 350px;
            margin-top: 10px ;
            background-color: #F7F5F6;
        }
        .mycart td[class="mycart-1"]{
            width: 320px;
        }
        .mycart td[class="mycart-2"]{
            width: 300px;
            padding-left: 100px;
            color: white;
        }
        .mycart td[class="mycart-3"]{
            width: 280px;
            padding-left: 100px;
            color: white;
        }
        .mycart td[class="mycart-4"]{
            width: 300px;
            padding-left: 100px;
            color: white;
        }
        .mycart-1{
            height: 90px;
            float: left;
        }
        .mycart-2,.mycart-3,.mycart-4{
            background-image: url(${pageContext.request.contextPath}/img/licurrent_bg.gif) ;
            background-repeat: no-repeat;
            background-position: center;
        }
        .showcart{
            height: 25px;
            margin-left: 370px;
            margin-top: 50px ;
            line-height: 25px;
            font-weight: bold;
        }
        .content{
            width: 1300px;
            height: 500px;
            margin-top: 10px ;
            margin-left: 350px;
            border: 1px solid #848484;
            border-collapse: collapse;
        }
        .content tr[class="content-row1"]{
            height: 45px;
            border: 1px solid #848484;
            background-color: #F5F5F5;
            border-width: 1px;
        }
        tr[class="content-row1"]>td{
            border: 1px solid #848484;
        }
        .content tr[class="content-row2"]{
            height: 120px;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row3"]{
            height: 120px;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row4"]{
            height: 120px;
            border-style:"border 1px solid #848484" ;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row5"]{
            height: 75px;
            clear: both;
            text-align: right;
            background-color: #F3F3F3;
        }
        .content tr[class="content-row6"]{
            height: 120px;
        }
        .content td{
            text-align: center;
            font-size: 13px;
        }
        .content td[class="content-col1"]{
            width: 85px;
        }
        .content td[class="content-col2"]{
            width: 155px;
        }
        .content td[class="content-col3"]{
            width: 540px;
        }
        .content td[class="content-col4"]{
            width: 110px;
        }
        .content td[class="content-col5"]{
            width: 110px;
        }
        .content td[class="content-col6"]{
            width: 110px;
        }
        .content td[class="content-row5-1"]{
            text-align: right;
            font-size: 13px;
        }
        .content-row5-2{
            color: #F06C12;
            padding-right: 20PX;
            font-size: 13px;
        }
        .content-font{
            color: #6E6868 ;
        }
        .content img{
            padding-top: 2px;
            height: 100px;
            box-sizing: border-box;
            border: 1px solid #848484;
        }

        .content-row6-right{
            width: 140PX;
            height: 50px;
            text-align: center;
            float: right;
            margin-bottom: 20PX;
            margin-right:20px ;
            line-height: 50PX;
            color: #FAFFFC;
            background-color:#D84F09 ;
            font-size: 20px;
            border-radius: 3px;
            box-sizing: border-box;
        }
        .content-row6-left{
            width: 110px;
            height: 30px;
            text-align: center;
            margin-TOP: 20PX;
            float: right;
            margin-right:20px ;
            line-height: 30PX;
            color: #848484;
            font-size: 20px;
            background-color:#f6f6f6 ;
            border: 1px solid #848484;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="button"]{
            width: 20px;
            height: 20px;
        }
        input[type="text"]{
            width: 45px;
            height: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
<%--商城抬头--%>
<%@include file="headtop.jsp"%>

<div class="trim"></div>

<div class="detail">
    您当前的位置:&nbsp;
    <a href="#">首页</a>
    &rsaquo;&rsaquo;购物车
</div>

<table class="mycart">
    <tr>
        <td>
            <img class="mycart-1" src="${pageContext.request.contextPath}/img/cart_logo.jpg" />
        </td>
        <td class="mycart-2">1、查看购物车</td>
        <td class="mycart-3">2、填写核对订单信息</td>
        <td class="mycart-4">3、成功提交订单</td>
        <td></td>
    </tr>
</table>

<div class="showcart">查看购物车</div>

<table  class="content">

    <tr class="content-row1"  >
        <td class="content-col1">
            <input type="checkbox"  id="selectAll"/>
            全选</td>
        <td class="content-col2">图片</td>
        <td class="content-col3">商品名称</td>
        <td class="content-col4">单价</td>
        <td class="content-col5">数量</td>
        <td class="content-col6">小计</td>
        <td class="content-col7">操作</td>
    </tr>
    <c:forEach items="${list}" var="cart" varStatus="status" >
    <tr class="content-row2">
        <td>
            <input type="checkbox" name="ids"  class="box" onclick="aa()" value="${cart.id}" id="box${cart.id}"/>
        </td>
        <td>
            <img href="" src="${pageContext.request.contextPath}/img/${cart.goods.image}" />
        </td>
        <td>
            <a href="#">
                    ${cart.goods.name}
            </a>
        </td>
        <td class="content-font pice"   id="totalPrice${cart.id}">
            ￥${cart.goods.salesprice}
        </td>
        <td>
            <a href="javascript:void(0)">
                <input type="button" value="-" onclick="sub(num${status.index })" class="sub"/>
            </a>
<%--            查询订单表的同时查询status--%>
            <input class="yzquantity1" onblur="yzquantity(1)" type="text"  name="amount" value="${cart.nums }" id="num${status.index }" >
            <a href="javascript:void(0)">
                <input type="button" value="+"  onclick="plus(num${status.index })" class="plus"/>
            </a>
        </td>
        <td class="content-font">
            ￥<font class="content-row5-2 price" id="totalPrice${cart.id}" >${cart.nums * cart.price}</font>
        </td>
        <td class="content-col7"  href="javascript:void(0)" class="content-font">删除</td>
    </tr>
    </c:forEach>

    <tr class="content-row5">
        <td class="content-row5-1" colspan="7" >金额总计(不含运费):￥
            <font class="content-row5-2" id="bb">0.00</font>
        </td>
    </tr>
    <tr class="content-row6">
        <td colspan="4">
        </td>
        <td colspan="3">
            <div class="content-row6-right">去结算</div>
            <div class="content-row6-left">
                <a href="${pageContext.request.contextPath }/index.jsp" class="btn btn-info btn-lg active btn-sm" role="button">继续购物</a>
            </div>

            <!-- <input class type="button" value="继续购物" />
            <input type="button" value="去结算" /> -->
        </td>
    </tr>
</table>

<!-- 底栏属性 -->
<%@include file="helpinfo.jsp"%>
<!-- 尾栏 -->
<%@include file="footer.jsp"%>



</body>
<script>
    // 复选框的全选和全不选
    $(function() {
        // 获得全部面的复选框
        var $selectAll = $("#selectAll");
        $selectAll.click(function() {
            // alert($selectAll.prop("checked"));
            if ($selectAll.prop("checked") == true) {
                // 复选框已被选中
                $(":checkbox[name='ids']").prop("checked", true);
                aa();
            } else {
                // 复选框没被选中
                $(":checkbox[name='ids']").prop("checked", false);
                $("#bb").text(0);
            }
        });
    });
    /*增加或删除数量*/
    function sub(psid) {
        if (psid.value > 0) {
            if (psid.value == 1) {
                alert("已到达最小数量！");
                return;
            }
            psid.value = psid.value-1;
            var a = psid.value;
            var c = $(psid).parent().parent().parent().parent().find(".pice")[0].innerHTML;
            var b = $(psid).parent().parent().parent().parent().find(".price")[0].innerHTML=a*c;
            $(".cot").innerHTML=b;

        } else {
            alert("请输入有效数量！");
        }
    }


    //加法
    function plus(psid) {
        if (psid.value > 0) {
            psid.value = +psid.value+1;
            var a = psid.value;
            var c = $(psid).parent().parent().parent().parent().find(".pice")[0].innerHTML;
            var b = $(psid).parent().parent().parent().parent().find(".price")[0].innerHTML=a*c;
        } else {
            alert("请输入有效数量！");
        }
    }

    function yzquantity(psid) {
        var yzquantity = $(".yzquantity" + psid).val();
        var reg = /^[0-9]*$/;
        reg.test(yzquantity);
        if (reg.test(yzquantity) == false) {
            alert("请输入有效数量！");
            $(".yzquantity" + psid).val(yzquantity);
        }
    }
    //单选框选中，触发结算的值更新,计算总价
    function aa() {
        $("input[name='ids']:checked").forEach()
        alert($(".box").val());
        var totalPrices =0;
        $("input[name='ids']:checked").parent().parent().parent().parent().find(".price").each(function (index,value) {
            a += +value.innerHTML;
        });
        $("#bb").text(a);
    }
</script>
</html>